<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="wap-font-scale" content="no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>滚滚筹-众筹列表</title>
    <link rel="stylesheet" href="css/common.min.css">
    <link rel="stylesheet" href="css/base.min.css">
</head>
<body class="isHide">
<div class="wrap height top bto g-f5">
    <div class="header">
        <div class="mid">
            <label class="text">众筹列表</label>
        </div>
        <div class="right">
            <a href="javascript:;" id="filtrate">
                <i class="sprite icon-filtrate"></i>
            </a>
        </div>
    </div>
    <div class="wrap height overflow" id="contentOverflow">
        <div class="overflow-box">
            <div class="search">
                <label class="user-form small radius before-text">
                    <em><i class="sprite icon-search"></i></em>
                    <input type="text" placeholder="输入需要查询的期数/名称" value="">
                </label>
                <a class="btn" href="javascript:;">搜索</a>
            </div>
            <div class="product">
                <div class="fb-module">
                    <div class="m-cont">
                        <div class="fb-list" id="list">
                            <div class="item">
                                <a href="details.html">
                                    <i class="sprite-state icon-sale state1"></i>
                                    <label class="pro-img"><img src="img/product.jpg"></label>
                                    <div class="pro-intro">
                                        <label class="pro-name tm-clamp tc-333 fs-15"><em class="tc-user">第十期</em>
                                            凯迪拉克ATS-L2017款技术型项目</label>
                                        <span class="pro-time tm-ellipsis tc-999 fs-12">2017-08-01 23:00:00 截止</span>
                                        <label class="pro-money clearfix fs-12">
                                            <span class="fl tc-999">
                                                <em>全筹金额：</em>
                                                <em>¥ 1,218,800</em>
                                            </span>
                                            <span class="fl tc-ff3d3d">
                                                <em>已认筹：</em>
                                                <em>¥ 1,218,800</em>
                                            </span>
                                        </label>
                                    </div>
                                </a>
                                <div class="progress-bar">
                                    <div class="fb-progress gradient fb-radius-3">
                                        <span class="runner finished"></span>
                                        <span class="runner unfinished"></span>
                                        <em class="meter unfinished hide">30.65%</em>
                                    </div>
                                    <label class="progress-intro clearfix">
                                        <span class="fl">12名支持者</span>
                                        <span class="fr tc-user">当前进度<em class="meter finished">20.65%</em></span>
                                    </label>
                                </div>
                            </div>

                            <div class="item">
                                <a href="details.html">
                                    <i class="sprite-state icon-sale state2"></i>
                                    <label class="pro-img"><img src="img/product.jpg"></label>
                                    <div class="pro-intro">
                                        <label class="pro-name tm-clamp tc-333 fs-15"><em class="tc-user">第十期</em>
                                            凯迪拉克ATS-L2017款技术型项目</label>
                                        <span class="pro-time tm-ellipsis tc-999 fs-12">2017-08-01 23:00:00 截止</span>
                                        <label class="pro-money clearfix fs-12">
                                            <span class="fl tc-999">
                                                <em>全筹金额：</em>
                                                <em>¥ 1,218,800</em>
                                            </span>
                                            <span class="fl tc-ff3d3d">
                                                <em>已认筹：</em>
                                                <em>¥ 1,218,800</em>
                                            </span>
                                        </label>
                                    </div>
                                </a>
                                <div class="progress-bar">
                                    <div class="fb-progress gradient fb-radius-3">
                                        <span class="runner"></span>
                                    </div>
                                    <label class="progress-intro clearfix">
                                        <span class="fl">12名支持者</span>
                                        <span class="fr tc-user">当前进度<em class="meter">35%</em></span>
                                    </label>
                                </div>
                            </div>

                            <div class="item">
                                <a href="details.html">
                                    <i class="sprite-state icon-sale state3"></i>
                                    <label class="pro-img"><img src="img/product.jpg"></label>
                                    <div class="pro-intro">
                                        <label class="pro-name tm-clamp tc-333 fs-15"><em class="tc-user">第十期</em>
                                            凯迪拉克ATS-L2017款技术型项目</label>
                                        <span class="pro-time tm-ellipsis tc-999 fs-12">2017-08-01 23:00:00 截止</span>
                                        <label class="pro-money clearfix fs-12">
                                            <span class="fl tc-999">
                                                <em>全筹金额：</em>
                                                <em>¥ 1,218,800</em>
                                            </span>
                                            <span class="fl tc-ff3d3d">
                                                <em>已认筹：</em>
                                                <em>¥ 1,218,800</em>
                                            </span>
                                        </label>
                                    </div>
                                </a>
                                <div class="progress-bar">
                                    <div class="fb-progress gradient fb-radius-3">
                                        <span class="runner"></span>
                                    </div>
                                    <label class="progress-intro clearfix">
                                        <span class="fl">12名支持者</span>
                                        <span class="fr tc-user">当前进度<em class="meter">100%</em></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="list-loading margin">
                            <i><img src="img/loading.gif"></i>
                            <span>加载中...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="fb-box-list">
            <ul class="row-4 clearfix">
                <li>
                    <a class="active" href="index.html">
                        <i class="sprite ft-icon1"></i>
                        <span>首页</span>
                    </a>
                </li>
                <li>
                    <a class="" href="list.html">
                        <i class="sprite ft-icon2"></i>
                        <span>众筹</span>
                    </a>
                </li>
                <li>
                    <a class="" href="wallet.html">
                        <i class="sprite ft-icon3"></i>
                        <span>钱包</span>
                    </a>
                </li>
                <li>
                    <a class="" href="personal.html">
                        <i class="sprite ft-icon4"></i>
                        <span>我的</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--置顶按钮-->
<a class="p-fix go-top" href="javascript:;" id="goTop" style="display: inline;"><img src="img/icon-top.png"></a>

<!--筛选侧边栏-->
<div class="fb-pop-disk filtrate-pop-disk">
    <div class="fb-pop-box filtrate-pop-box width right animated-left">
        <div class="fb-disk-bd bottom filtrate-box">
            <div class="wrap height overflow">
                <div class="fb-module">
                    <div class="m-title"><span class="tc-333 fs-15">排序</span></div>
                    <div class="m-cont pad">
                        <div class="fb-box-list">
                            <ul class="row-3 clearfix">
                                <li><a class="fb-btn small line black active" href="javascript:;">全部</a></li>
                                <li><a class="fb-btn small line black" href="javascript:;">关注最多</a></li>
                                <li><a class="fb-btn small line black" href="javascript:;">666666</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="fb-module">
                    <div class="m-title"><span class="tc-333 fs-15">价格</span></div>
                    <div class="m-cont pad">
                        <div class="fb-box-list">
                            <ul class="row-3 clearfix">
                                <li><a class="fb-btn small line black active" href="javascript:;">全部</a></li>
                                <li><a class="fb-btn small line black" href="javascript:;">5万以下</a></li>
                                <li><a class="fb-btn small line black" href="javascript:;">5万-10万</a></li>
                                <li><a class="fb-btn small line black" href="javascript:;">10万-20万</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="fb-module">
                    <div class="m-title"><span class="tc-333 fs-15">状态</span></div>
                    <div class="m-cont pad">
                        <div class="fb-box-list">
                            <ul class="row-3 clearfix">
                                <li><a class="fb-btn small line black active" href="javascript:;">全部</a></li>
                                <li><a class="fb-btn small line black" href="javascript:;">预热中</a></li>
                                <li><a class="fb-btn small line black" href="javascript:;">众筹中</a></li>
                                <li><a class="fb-btn small line black" href="javascript:;">出售中</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="fb-disk-footer clearfix">
                <a class="fb-btn background no-bd big no-br gray">重置</a>
                <a class="fb-btn background no-bd big no-br blue" id="sure">确定</a>
            </div>
        </div>
    </div>
</div>

<script type="text/template" id="listHtml">
    <div class="item">
        <a href="details.html">
            <i class="sprite-state icon-sale state4"></i>
            <label class="pro-img"><img src="img/product.jpg"></label>
            <div class="pro-intro">
                <label class="pro-name tm-clamp tc-333 fs-15"><em class="tc-user">第十期</em>
                    凯迪拉克ATS-L2017款技术型项目</label>
                <span class="pro-time tm-ellipsis tc-999 fs-12">2017-08-01 23:00:00 截止</span>
                <label class="pro-money clearfix fs-12">
                    <span class="fl tc-999">
                        <em>全筹金额：</em>
                        <em>¥ 1,218,800</em>
                    </span>
                    <span class="fl tc-ff3d3d">
                        <em>已认筹：</em>
                    <em>¥ 1,218,800</em>
                    </span>
                </label>
            </div>
        </a>
        <div class="progress-bar">
            <div class="fb-progress gradient fb-radius-3">
                <span class="runner"></span>
            </div>
            <label class="progress-intro clearfix">
                <span class="fl">12名支持者</span>
                <span class="fr tc-user">当前进度<em class="meter">100%</em></span>
            </label>
        </div>
    </div>
</script>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/box.js"></script>
<script src="js/common.js"></script>
<script src="js/base.js"></script>
<script>
    $(function () {
        //页面滚动
        var ajaxDataNum = 0, downflag = false;
        pageScroll({
            hasTop: true,
            element: "#contentOverflow",
            ajaxFun: function () {
                if (!downflag) {
                    downflag = true;
                    var list = $("#listHtml").html();
                    var str = "";
                    for (var i = 0; i <= 5; i++) {
                        str += list;
                    }
                    setTimeout(function () {
                        ajaxDataNum++;
                        if (ajaxDataNum >= 5) {
                            $(".list-loading").html("没有更多数据");
                            return false;
                        }
                        $("#list").append(str);
                        downflag = false;
                    }, 1000);
                }
            }
        });

        //进度条
        setProgress(".progress-bar");

        //筛选
        var filtrate = popLeftMenu({
            clickEle: "#filtrate",
            diskEle: ".filtrate-pop-disk",
            animateEle: ".filtrate-pop-box"
        });

        $(".fb-box-list a").click(function () {
            $(this).addClass("active").closest("li").siblings().find("a").removeClass("active");
        });

        $("#sure").click(function () {
            filtrate.closeFun();
        });
    })
</script>
</body>
</html>